<template>
  <view class="wrap">
    <view class="header">
      <img class="headerBg" src="https://ainengli.hzjrsw.com/jkhx/greenWay2.png" alt="" />
      <view class="serveIntroduce">
        <view class="title">绿通服务介绍</view>
        <view class="content">
          会员可提交就医需求申请，工作人员在2个工作日内致电会员沟通就医需求，并协助预约指定合作三甲医院范围内对症科室的医生号源。
        </view>
      </view>
    </view>
    <view class="applyWrap">
      <view class="apply">
        <img class="headerBg" src="https://ainengli.hzjrsw.com/jkhx/apply.png" alt="" />
        <text class="name">绿通服务申请</text>
      </view>
      <view class="list">
        <view class="item">
          <view class="patient">就诊人</view>
          <view class="info">
            <text class="name">{{ state.userInfo.patName }}</text>
            <text class="name">{{ state.userInfo.gender == '女性' ? '女' : '男' }}</text>
            <text class="name">{{ state.userInfo.age }}岁</text>
          </view>
        </view>
        <view class="item">
          <view class="patient">期望就诊医院</view>
          <view class="entry" @tap="visitHos('hospital')">
            <!-- <input
                class="input"
                placeholder-class="search-input-placeholder"
                readonly
                placeholder="请输入"
              /> -->
            <up-input
              placeholder-style="font-size: 30rpx;color: #999;"
              readonly
              border="none"
              placeholder="请选择"
              v-model="state.hospitalValue"
            ></up-input>
            <img class="headerBg" src="@/static/image/hmm/4-1.png" alt="" />
          </view>
        </view>
        <view class="item">
          <view class="patient">期望就诊医生</view>
          <view class="entry" @tap="visitHos('doctor')">
            <up-input
              placeholder-style="font-size: 30rpx;color: #999;"
              readonly
              border="none"
              placeholder="请选择"
              v-model="state.doctorValue"
            ></up-input>
            <img class="headerBg" src="@/static/image/hmm/4-1.png" alt="" />
          </view>
        </view>
      </view>
    </view>
    <view class="submitApplication">
      <view class="record" @tap="record">
        <img class="headerBg" src="https://ainengli.hzjrsw.com/jkhx/record.png" alt="" />
        <view class="name">申请记录</view>
      </view>
      <view class="btnWrap">
        <view class="btn" @tap="sure">提交申请</view>
        <view class="bg" v-if="state.isBG"></view>
      </view>
    </view>
    <up-popup :show="isShow" :round="32" mode="bottom" closeable @close="isShow = false">
      <view class="title">{{ state.popupTitle }}</view>
      <view class="contentVisit">
        <view class="item" v-for="(item, index) in visitList" :key="index" @tap="visitFun(item)">
          {{ item.name }}
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { submitOrderApply } from '@/api/hmm'
import { subscribeMessage } from '@/api/index'
const state = reactive({
  isBG: false,
  titleName: '',
  popupTitle: '',
  hospitalValue: '',
  doctorValue: '',
  userInfo: {},
  userObj: {}
})
const bizOrderNo = ref('')
const isShow = ref(false)
const visitList = ref([])
onShow(() => {
  uni.showLoading({
    title: '加载中'
  })
  setTimeout(() => {
    uni.hideLoading()
  }, 200)
  state.isBG = false
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.userObj = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : {}
  if (state.userInfo && state.userInfo.reportState == false && state.userInfo.isVip == false) {
    uni.redirectTo({ url: '/packA/pages/questionaire/physical' })
  }
})
const visitHos = (name) => {
  isShow.value = true
  if (name == 'hospital') {
    state.titleName = 'hospital'
    state.popupTitle = '期望就诊医院'
    visitList.value = [
      {
        name: '浙江大学医学院附属邵逸夫医院'
      },
      {
        name: '美联医院'
      }
    ]
  } else {
    state.titleName = 'doctor'
    state.popupTitle = '期望就诊医生'
    if (state.hospitalValue == '浙江大学医学院附属邵逸夫医院') {
      visitList.value = [
        {
          name: '黄苗苗'
        },
        {
          name: '余晓超'
        },
        {
          name: '赵可'
        }
      ]
    } else {
      visitList.value = [
        {
          name: '饶正淦'
        },
        {
          name: '叶艳仙'
        },
        {
          name: '周懿聪'
        }
      ]
    }
  }
}
const visitFun = (item) => {
  isShow.value = false
  if (state.titleName == 'hospital') {
    state.hospitalValue = item.name
    state.doctorValue = ''
  } else {
    state.doctorValue = item.name
  }
}
const record = () => {
  uni.navigateTo({ url: '/packA/pages/healthManage/applyRecord' })
}
const sure = () => {
  uni.showLoading({
    title: '加载中'
  })
  if (!state.hospitalValue) {
    uni.showToast({
      title: '请选择期望就诊医院',
      icon: 'none'
    })
    return
  } else if (!state.doctorValue) {
    uni.showToast({
      title: '请选择期望就诊医生',
      icon: 'none'
    })
    return
  }
  let param = {
    userId: state.userObj.userId,
    phone: state.userObj.phone,
    empi: state.userInfo.empi,
    patName: state.userInfo.patName,
    hospitalName: state.hospitalValue,
    doctorName: state.doctorValue
  }
  state.isBG = true
  submitOrderApply(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      uni.showToast({
        title: '提交成功',
        icon: 'none',
        duration: 2000
      })
      bizOrderNo.value = res.data.orderNo
      // 点击按钮订阅消息
      uni.requestSubscribeMessage({
        tmplIds: ['HcbmspllNHXaR6VtwLbLZepIw9EB8yHzpGqfidHeHPk'],
        success(res) {
          if (res.errMsg === 'requestSubscribeMessage:ok') {
            // 订阅成功，可以在这里触发订阅消息的后续操作
            pushMessage(res.HcbmspllNHXaR6VtwLbLZepIw9EB8yHzpGqfidHeHPk)
          }
        },
        fail(err) {
          // 订阅失败，可以在这里处理订阅失败的情况
          console.error(err);
          uni.showLoading()
          setTimeout(() => {
            uni.hideLoading()
            state.hospitalValue = ''
            state.doctorValue = ''
            uni.navigateTo({ url: '/packA/pages/healthManage/applyRecord' })
          }, 2000)
        }
      });
    }
  })
}

const pushMessage = (status: string) => {
    // 订阅成功提醒后端
    let params = {
      tempId: 'HcbmspllNHXaR6VtwLbLZepIw9EB8yHzpGqfidHeHPk',
      openId: state.userObj.openId,
      empi: state.userInfo.empi,
      state: status,
      bizNo: bizOrderNo.value
    }
    subscribeMessage(params).then((res) => {
      console.log('订阅成功', params, res)
      uni.showLoading()
      setTimeout(() => {
        uni.hideLoading()
        state.hospitalValue = ''
        state.doctorValue = ''
        uni.navigateTo({ url: '/packA/pages/healthManage/applyRecord' })
      }, 2000)
    })
}
</script>
<style lang="scss" scoped>
.wrap {
  min-height: calc(100vh - 150rpx);
  padding-bottom: 170rpx;
  .header {
    position: relative;
    height: 420rpx;
    .headerBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .serveIntroduce {
      position: relative;
      z-index: 1;
      display: inline-block;
      width: calc(100% - 64rpx);
      margin-left: 32rpx;
      margin-top: 360rpx;
      background: #fff;
      padding: 32rpx;
      border-radius: 16rpx;
      .title {
        font-size: 32rpx;
        color: #222;
        font-weight: 700;
      }
      .content {
        font-size: 28rpx;
        color: #666;
        margin-top: 20rpx;
        line-height: 1.8;
      }
    }
  }
  .applyWrap {
    background: #fff;
    margin: 252rpx 32rpx 0;
    padding: 32rpx 32rpx 0;
    border-radius: 16rpx;
    .apply {
      .headerBg {
        display: inline-block;
        vertical-align: middle;
        width: 40rpx;
        height: 40rpx;
      }
      .name {
        display: inline-block;
        vertical-align: middle;
        font-size: 32rpx;
        color: #222;
        font-weight: 700;
        margin-left: 16rpx;
      }
    }
    .list {
      .item {
        height: 108rpx;
        line-height: 108rpx;
        position: relative;
        font-size: 30rpx;
        color: #222;
        border-bottom: 1rpx solid #e5e6eb;
        &:nth-last-child(1) {
          border-bottom: 0;
        }
        .patient {
          font-weight: 700;
          width: 220rpx;
        }
        .info {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          .name {
            display: inline-block;
            vertical-align: middle;
            &:nth-child(2) {
              margin: 0 15rpx;
            }
          }
        }
        ::v-deep .entry {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          width: calc(100% - 220rpx);
          //   background: red;
          .input {
            display: inline-block;
            vertical-align: middle;
            width: calc(100% - 40rpx);
            text-align: right;
            font-size: 30rpx;
          }
          .u-input {
            display: inline-block;
            vertical-align: middle;
            width: calc(100% - 40rpx);
            text-align: right;
            font-size: 30rpx;
            .u-input__content__field-wrapper__field {
              text-align: right !important;
            }
          }
          .headerBg {
            display: inline-block;
            vertical-align: middle;
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }
  .submitApplication {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 24rpx;
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    background: #fff;
    .record {
      width: 136rpx;
      display: inline-block;
      vertical-align: middle;
      height: 88rpx;
      .headerBg {
        display: block;
        width: 40rpx;
        height: 40rpx;
        margin: 10rpx auto 8rpx;
      }
      .name {
        font-size: 20rpx;
        color: #222;
        font-weight: 700;
        display: block;
        text-align: center;
      }
    }
    .btnWrap {
      width: calc(100% - 168rpx);
      display: inline-block;
      vertical-align: middle;
      position: relative;
      .btn {
        height: 88rpx;
        background: #00d1b6;
        text-align: center;
        line-height: 88rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
        color: #fff;
        font-weight: 700;
      }
      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: rgba(0, 0, 0, 0.001);
      }
    }
  }
  ::v-deep .u-popup {
    .title {
      height: 108rpx;
      line-height: 108rpx;
      text-align: center;
      font-weight: 700;
      font-size: 32rpx;
      color: #222;
      border-bottom: 1px solid #e5e6eb;
    }
    .contentVisit {
      margin: 32rpx;
      max-height: 680rpx;
      overflow: auto;
      .item {
        height: 96rpx;
        line-height: 96rpx;
        background: #fafafa;
        border-radius: 8rpx;
        font-size: 30rpx;
        color: #222;
        text-align: center;
        margin-top: 32rpx;
        &:nth-child(1) {
          margin-top: 0;
        }
      }
    }
  }
  ::v-deep .u-icon__icon {
    font-size: 32rpx !important;
    line-height: 50rpx !important;
  }
}
</style>
